<script setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
];
</script>
<template>
  <el-card class="!border-none" shadow="never">
    <el-form ref="formRef" class="mb-[-16px]" :model="searchForm" :inline="true">
      <el-form-item class="w-[280px]" label="部门名称" prop="name">
        <el-input placeholder="输入部门名称" clearable />
      </el-form-item>
      <el-form-item class="w-[280px]" label="部门状态" prop="status">
        <el-select>
          <el-option label="全部" value />
          <el-option label="正常" value="1" />
          <el-option label="停用" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card class="mt-20px !border-none" shadow="never">
    <div>
      <el-button type="primary">
        <template #icon>
          <icon name="icon-ep-plus" />
        </template>
        新增
      </el-button>
      <el-button>展开/折叠</el-button>
    </div>
    <el-table class="mt-4" :data="tableData" :border="false">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
    <div class="mt-20px text-right">
      <el-pagination
        :background="false"
        :page-size="100"
        :total="1000"
        :page-sizes="[100, 200, 300, 400, 500]"
        layout="->, total, sizes, prev, pager, next, jumper"
        @size-change="() => {}"
        @current-change="() => {}"
      />
    </div>
  </el-card>
</template>
